<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      用户名:
      <input type="text" v-model = "username">
    </div>
    <div>
      密码:
      <input type="password" v-model = "password">
    </div>
    <div>
      性别:
      <input type="radio" v-model = "sex" value="1"> 男
      <input type="radio" v-model = "sex" value="0"> 女
    </div>
    <div>
      爱好:
      <input type="checkbox" v-model = "hobby" value="篮球"> 篮球
      <input type="checkbox" v-model = "hobby" value="排球"> 排球
      <input type="checkbox" v-model = "hobby" value="网球"> 网球
    </div>
    <div>
      课程<select v-model = "lesson">
        <option value="">全部</option>
        <option value="1">1阶段</option>
        <option value="2">2阶段</option>
        <option value="3">3阶段</option>
      </select>
    </div>
    <div>
      <input type="checkbox" v-model="flag"> 同意***协议
    </div>
    <button @click = "getData">获取数据</button>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      username: '吴大勋',
      password: '123456',
      sex: '1',
      lesson: '',
      hobby: [],
      flag: true
    },
    methods: {
      // 自定义事件
      getData () {
        console.log({
          username: this.username,
          password: this.password,
          sex: this.sex,
          hobby: this.hobby
        })
      }
    }
  })
</script>
</html>